<template>
    <div id='ArtItemComponent'>
        <div class="tabContent">
            <div class="titleBox" @click="router.push('/article/' + item.art_id)">
                <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
                <div class="imgWrap" v-if="item.cover.type === 1">
                    <img v-lazy="item.cover.images[0]" />
                </div>
            </div>
            <div class="thumbBox" v-if="item.cover.type === 3" @click="router.push('/article/' + item.art_id)">
                <div class="imgWrap" v-for=" (i, index) in  item.cover.images" :key="index">
                    <img v-lazy="i" alt />
                </div>
            </div>
            <div class="labelBox">
                <span>作者 {{ item.aut_name }} &nbsp; 评论 {{ item.comm_count }} &nbsp; 发布日期 {{
                    formatTime(item.pubdate)
                }}</span>
                <span v-if="props.showAction">
                    <van-icon name="cross" @click="handleIconClick(item.art_id)"></van-icon>
                </span>
            </div>
        </div>
        <div class="actions" v-if="props.showAction">
            <!-- 一级反馈面板 -->
            <van-action-sheet v-model:show="actionShow" :actions="actions" cancel-text="取消" close-on-click-action
                :duration="0.2" @select="handleSelect" />
            <!-- 二级反馈面板 -->
            <van-action-sheet v-model:show="actionShowReports" :actions="reports" cancel-text="返回" close-on-click-action
                @select="handleSelectReports" @cancel="actionShow = true" />
        </div>
    </div>
</template>

<script  setup>
import { Toast, Icon as vanIcon, ActionSheet as vanActionSheet } from 'vant'
import { ref, defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import { articleDislike, articleReport } from '@/api/index'
import reports from '@/api/reports'
const router = useRouter()

const props = defineProps({
    item: {
        type: Object,
        default: () => ({}),
        required: true
    },
    showAction: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['removeArticleItem'])
// 格式化时间函数
const formatTime = (time) => {
    const res = Math.abs(parseInt(moment(time, 'YYYY-MM-DD hh:mm:ss').diff(moment()) / 1000))

    if (res < 60) return `${res} 秒前`
    else if (res < 3600) return `${Math.floor(res / 60)} 分钟前`
    else if (res < 86400) return `${Math.floor(res / 3600)} 小时前`
    else if (res < 604800) return `${Math.floor(res / 86400)} 天前`
    else if (res < 2592000) return `${Math.floor(res / 604800)} 周前`
    else if (res < 31536000) return `${Math.floor(res / 2592000)} 月前`
    else return `${Math.floor(res / 31536000)} 年前`
}

// 动作面板
const currentId = ref(null)
const handleIconClick = (id) => {
    currentId.value = id
    actionShow.value = true
}
const actionShow = ref(false)
const actions = ref([
    { name: '不感兴趣' },
    { name: '反馈垃圾内容' },
    { name: '拉黑作者' }
])

const handleSelect = ({ name }) => {
    if (name === '不感兴趣') {
        articleDislike(currentId.value)
        Toast.success('已提交')
        emits('removeArticleItem', currentId.value)
    } else if (name === '拉黑作者') {
        Toast.success('已拉黑此作者')
    } else if (name === '反馈垃圾内容') {
        actionShowReports.value = true
    }
}

// 二级动作面板
const actionShowReports = ref(false)
// 重做reports的label为name
reports.forEach(item => {
    item.name = item.label
})
const handleSelectReports = ({ type }) => {
    try {
        articleReport(props.item.art_id, type)
        emits('removeArticleItem', currentId.value)
        Toast.success('已提交')
    } catch (e) {
        Toast.fail('提交失败')
    }
}
</script>

<style lang='less'>
.tabContent {
    padding: 10px 16px;

    .imgWrap {
        width: 112px;
        height: 70px;

        img {
            width: 112px;
            height: 70px;
        }
    }

    .titleBox {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;

        .title {
            padding-top: 2px;
            font-size: 16px;
        }
    }

    .thumbBox {
        display: flex;
        justify-content: space-between;
    }

    .labelBox {
        margin-top: 5px;
        font-size: 12px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }
}
</style>
